<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>监控中心-运营统计分析</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<link rel="stylesheet" type="text/css" href="/css/footer.css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript" src="/js/preview/WdatePicker.js"></script>
<script type="text/javascript" src="/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/js/highcharts/exporting.js"></script>
<script type="text/javascript" src="/js/highcharts/draggable-legend.js"></script>
<script type="text/javascript" src="/js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="/js/highcharts/data.js"></script>
<script src="/js/js.cookie.js"></script>
<script src="/js/csrf.token.js"></script>
<script src="/js/jquery.JPlaceholder.js"></script>

<script>

$(function(){
	getdata();
});

var tdate;
var ydate;

function formatDate(date) { 
	var myyear = date.getFullYear(); 
	var mymonth = date.getMonth()+1; 
	var myweekday = date.getDate(); 

	if(mymonth < 10){ 
	mymonth = "0" + mymonth; 
	} 
	if(myweekday < 10){ 
	myweekday = "0" + myweekday; 
	} 
	return (myyear+"-"+mymonth + "-" + myweekday); 
} 

function initdate(selectdate){
	if(selectdate!=null&&selectdate!=""){
		selectdate=selectdate.replace(/-/gm,'/');
		now=new Date(Date.parse(selectdate));	
	}else if("{{ oadate }}"!=null&&"{{ oadate }}"!=""){
		now=new Date(Date.parse("{{ oadate }}"));
	}else{
		now=new Date();
	}
	tdate=formatDate(now);
	var result = new Date(Date.parse(now) - (86400000));;
	ydate=formatDate(result);

}


function getdata(){
	getdata_fxjy();
	getdata_cbhz();
	getdata_zybjzb();
	getdata_dlsjdspm();
	getdata_ywbjtj();
	getdata_hjzxsj();
	getdata_bhqyysj();

}

function getdata_fxjy(){
	initdate($("#selectdate").val());
	$.ajax( {  
		url:"/sa_data/satext_view",// 跳转到 action  
		data:{  
			tdate:tdate,
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var pbdata=data.pbdata;
			var workC="";
			var workAB="";
			for(var v=0;v<pbdata.length;v++){
				switch(pbdata[v].cab){
				case 'C':
					workC+=pbdata[v].name+" ";
					break;
				case 'A':
					workAB+=pbdata[v].name+" ";
					break;
				case 'B':
					workAB+=pbdata[v].name+" ";
					break;
				default:
					break;
				}
			}

			var fxjy=data.fxjy;
			var data_fxjy=$("#data_fxjy");
			data_fxjy.empty();
			$("#time_fxjy").html("("+ydate+")");	
			if (fxjy==''||fxjy==null){
				$("#data_fxjy").html("<font color=green>"+ydate+"- <font color=#2AE708>"+workAB+"</font>-A、B班未填写数据！</font>");	
			}
			for(var i=0;i<fxjy.length;i++){
				data_fxjy.append($("<span></span>").html(fxjy[i]));
				if(i<fxjy.length-1){
					data_fxjy.append($("<br/>"));
				}
			}

		},  
		error:function(){     
		   alert("运营分析建议数据异常！");  
		}  
	 });


}

function getdata_cbhz(){
	initdate($("#selectdate").val());
	$.ajax( {  
		url:"/sa_data/satext_view",// 跳转到 action  
		data:{  
			tdate:tdate,
			ydate:tdate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var pbdata=data.pbdata;
			var workC="";
			var workAB="";
			for(var v=0;v<pbdata.length;v++){
				switch(pbdata[v].cab){
				case 'C':
					workC+=pbdata[v].name+" ";
					break;
				case 'A':
					workAB+=pbdata[v].name+" ";
					break;
				case 'B':
					workAB+=pbdata[v].name+" ";
					break;
				default:
					break;
				}
			}

			var cbhz=data.cbhz;
			var data_cbhz=$("#data_cbhz");
			data_cbhz.empty();
			$("#time_cbhz").html("("+tdate+")");
			if (cbhz==''||cbhz==null){
				$("#data_cbhz").html("<font color=green>"+tdate+"- <font color=#2AE708>"+workC+"</font>-C班未填写数据！</font>");	
			}	
			for(var i=0;i<cbhz.length;i++){
				data_cbhz.append($("<span></span>").html(cbhz[i]));
				if(i<cbhz.length-1){
					data_cbhz.append($("<br/>"));
				}
			}


		},  
		error:function(){     
		   alert("C班报警汇总数据异常！");  
		}  
	 });


}

//网格主题
Highcharts.theme = {
	colors: ['#058DC7', '#DDDF00', '#ED561B', '#90ED7D', '#434348', '#8085E9', '#F4A460', '#00BFFF', '#F15C80', '#FFF263', '#72727F'],
	chart: {
		backgroundColor: {
			linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
			stops: [
				[0, 'rgb(255, 255, 255)'],
				[1, 'rgb(240, 240, 255)']
			]
		},
		borderWidth: 0,
		plotBackgroundColor: 'rgba(255, 255, 248, .9)',
		plotShadow: false,
		plotBorderWidth: 0
	},
	title: {
		style: {
			color: '#000',
			font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	subtitle: {
		style: {
			color: '#666666',
			font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
		}
	},
	xAxis: {
		gridLineWidth: 0,
		lineColor: '#000',
		tickColor: '#000',
		labels: {
			style: {
				color: '#000',
				font: '11px Trebuchet MS, Verdana, sans-serif'
			}
		},
		title: {
			style: {
				color: '#333',
				fontWeight: 'bold',
				fontSize: '12px',
				fontFamily: 'Trebuchet MS, Verdana, sans-serif'

			}
		}
	},
	legend: {
		itemStyle: {
			font: '9pt Trebuchet MS, Verdana, sans-serif',
			color: 'black'

		},
		itemHoverStyle: {
			color: '#039'
		},
		itemHiddenStyle: {
			color: 'gray'
		}
	},
	labels: {
		style: {
			color: '#99b'
		}
	},
	navigation: {
		buttonOptions: {
			theme: {
				stroke: '#CCCCCC'
			}
		}
	}
};

// 应用主题
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);



function getdata_zybjzb(){
	initdate($("#selectdate").val());
	$.ajax( {  
		url:"/sa_data/alarmdata_view",// 跳转到 action  
		data:{  
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			$("#fullfill").hide();
			var data_dx=data.zybj;

			var data_sz=new Array();
			for(var i=0;i<data_dx.length;i++){
				var data_one=new Array();
				data_one.push(data_dx[i].title);
				data_one.push(data_dx[i].num);
				data_sz.push(data_one);
			}

			//console.info(data_sz);

			var chart = new Highcharts.Chart({
			  chart: {
				 renderTo: 'zybjzb'
			  },
			  title: {
				 text: '<a style="color:#4b8cdd;font-weight:bold;">重要报警占比('+ydate+')</a>'
			  },
			 /*subtitle:{
				text:'<span style=\"color:red;text-align:right;\">tip:鼠标放到饼图上可查看报警数！</span>'+'<a href=\"http://10.1.100.110/preview/sheet/tab/home.html\" target=_blank>点击查看各报警趋势图</a>'
			 },*/
			  plotArea: {
				 shadow: null,
				 borderWidth: null,
				 backgroundColor: null
			  },
			  tooltip: {
				 formatter: function() {
					//return '<b>'+ this.point.name +'</b>' +'% ('+
					return "<b>报警类型：</b>"+ '<font color=red>'+this.point.name+'</font>' +'<br>'+'<b>占比: </b>'+  '<font color=red>'+Highcharts.numberFormat(this.percentage, 1)+'%'+'</font>' +'<br>'+'<b>报警数：</b>'+
								 '<font color=red>'+Highcharts.numberFormat(this.y, 0, ',') +' 条'+'</font>';
				 }
			  },
			  plotOptions: {
				 pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
					   enabled: true,
					   formatter: function() {
						  //if (this.percentage > 0) return this.point.name;
						  if (this.percentage > 0) return this.point.name+'：'+Highcharts.numberFormat(this.percentage, 1) +'%';
					   },
					   color: 'black',
					   style: {
						  font: '13px Trebuchet MS, Verdana, sans-serif'
					   }
					}
				 }
			  },
			  legend: {
				 backgroundColor: '#000',
				 x: 0,
				 y: -10
			  },
			  credits: {
				  enabled: false
			  },
			   series: [{
				 type: 'pie',
				 name: 'Browser share',
				 data: data_sz
			  }]
		   });

			$("#time_sdbsbjsm").html("报警数目Top ("+ydate+")");	
			var tbody_data_sdbsbjsm=$("#data_sdbsbjsm");	
			tbody_data_sdbsbjsm.empty();
			var data_sdbsbjsm=data.bjtop;
			if(data_sdbsbjsm==undefined||data_sdbsbjsm==""||data_sdbsbjsm==null){
				tbody_data_sdbsbjsm.append("<td><font color=red>"+ydate+"数据为空或异常！</font></td><td>！</td><td>！</td>");
			}
			for(var i=0;i<data_sdbsbjsm.length;i++){
				var tr=$("<tr></tr>");
				var td_bh=$("<td></td>").html(data_sdbsbjsm[i].alarmType);
				tr.append(td_bh);
				var td_bt=$("<td></td>").html(data_sdbsbjsm[i].title);
				tr.append(td_bt);
				var td_sm=$("<td></td>").html(data_sdbsbjsm[i].total);
				tr.append(td_sm);
				tbody_data_sdbsbjsm.append(tr);
			}
		},  
		error:function(){     
		   alert("重要报警占比或报警数目TOP异常！");  
		}  
	 });
}




function getdata_dlsjdspm(){
	initdate($("#selectdate").val());

	var num=$("#num_dlsjdspm").val();

	if(num==undefined||num==""||num==null){
		num=10;
	}

	$.ajax( {  
		url:"/sa_data/ordertop_view",// 跳转到 action  
		data:{  
			num:num,
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			$("#time_dlsjdspm").html('<a style="color:#4b8cdd;font-weight:bold;">代理商进单数排名('+ydate+')</a>');	
			var tbody_data_dlsjdspm=$("#data_dlsjdspm");	
			tbody_data_dlsjdspm.empty();

			var data_dlsjdspm=data.jdph;

			for(var i=0;i<data_dlsjdspm.length;i++){
				var tr=$("<tr></tr>");
				var td_xt=$("<td></td>").html(data_dlsjdspm[i].sys);
				tr.append(td_xt);
				var td_bh=$("<td></td>").html(data_dlsjdspm[i].number);
				tr.append(td_bh);
				var td_dls=$("<td></td>").html(data_dlsjdspm[i].name);
				tr.append(td_dls);
				var td_jds=$("<td></td>").html(data_dlsjdspm[i].top);
				tr.append(td_jds);
				var td_pm=$("<td></td>").html(i+1);
				tr.append(td_pm);
				tbody_data_dlsjdspm.append(tr);
			}
			
			var data_sz=new Array();
			for(var i=0;i<data_dlsjdspm.length;i++){
				var data_one=new Array();
				data_one.push(data_dlsjdspm[i].name);
				data_one.push(data_dlsjdspm[i].top);
				data_sz.push(data_one);
			
			}
			
			$('#dlsjdszb').highcharts({
				chart: {
					plotBorderWidth:null,
					plotShadow: false
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">代理商进单数占比('+ydate+')</a>'
				},
		credits:{

					text:'',//监控中心
					href:'/'
				},
				tooltip: {
					pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							format: '<b>{point.name}</b>: {point.percentage:.1f} %',
							style: {
								color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
							}
						}
					}
				},
				series: [{
					type: 'pie',
					name: '占比',
					data: data_sz
				}]
			});



		},  
		error:function(){     
		   alert("代理商进单数排名异常！");  
		}  
	 });
}



//业务报警统计


function getdata_ywbjtj(){
	initdate($("#selectdate").val());

	$.ajax( {  
		url:"/sa_data/alarmall_view",// 跳转到 action  
		data:{  
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var data_dx=data.ywbj;
			var data_rq=new Array();

			var data_sj=new Array();

			for(var i=0;i<data_dx.length;i++){
				var data_one=new Array();
				var data_one_date=data_dx[i].date;
				data_one.push(data_one_date.substr(data_one_date.length-5));
				data_rq.push(data_one);


				var data_one_sj={};
				data_one_sj['y']=data_dx[i].num;
				data_sj.push(data_one_sj);
			}

			
			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'ywbj',
					type: 'column',
					margin: 66,
					options3d: {
						enabled: true,
						alpha: 6,
						beta: 6,
						depth: 100,
						viewDistance: 200
					}
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">业 务 报 警 系 统</a>'
				},
				credits: {
					text: '',
					href: '/'
				},
				plotOptions: {
					column: {
						depth: 25
					}
				},
				xAxis: {
					categories: data_rq,

					labels: {
						zIndex: 6
					}
				},
				yAxis: {
					title: {
						text: '业 务 报 警 总 计 ( 条 )'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}],
					labels: {
						zIndex: 6
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': <b>'+ this.y +'</b>';
					}
				},
				series: [{
					name: '每日报警总计',
					data: data_sj
				}]
			});

			$('#R0').on('change', function(){
				chart.options.chart.options3d.alpha = this.value;
				showValues();
				chart.redraw(false);
			});
			$('#R1').on('change', function(){
				chart.options.chart.options3d.beta = this.value;
				showValues();
				chart.redraw(false);
			});

			function showValues() {
				$('#R0-value').html(chart.options.chart.options3d.alpha);
				$('#R1-value').html(chart.options.chart.options3d.beta);
			}
			showValues();


			
		},  
		error:function(){     
		   alert("业务报警统计异常！");  
		}  
	 });
    
}




function getdata_hjzxsj(){
	initdate($("#selectdate").val());

	$.ajax( {  
		url:"/sa_data/justcenter_view",// 跳转到 action  
		data:{  
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var data_dx=data.hjzx;

			var data_rq=new Array();
			var data_sj=new Array();



			var data_mrhwl={};
			data_mrhwl['name']='每日话务量';
			var data_mrhwl_data=new Array();

			var data_szkfhss={};
			data_szkfhss['name']='深圳客服(8801)呼损数';
			var data_szkfhss_data=new Array();
			
			

			for(var i=0;i<data_dx.length;i++){
				var data_one=new Array();
				var data_one_date=data_dx[i].date;
				data_one.push(data_one_date.substr(data_one_date.length-5));
				data_rq.push(data_one);
				
				
				
				var data_one_mrhwl={};
				data_one_mrhwl['y']=data_dx[i].call_num;
				data_mrhwl_data.push(data_one_mrhwl);

				var data_one_szkfhss={};
				data_one_szkfhss['y']=data_dx[i].call_loss;
				data_szkfhss_data.push(data_one_szkfhss);

				
			}

			data_mrhwl['data']=data_mrhwl_data;
			data_szkfhss['data']=data_szkfhss_data;

			data_sj.push(data_mrhwl);
			data_sj.push(data_szkfhss);



			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'hjzx',
					type: 'spline'
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">呼 叫 中 心 系 统</a>'
				},
				credits: {
					text: '',
					href: '/'
				},
				xAxis: {
					categories: data_rq,
					labels: {
						zIndex: 6
					}
				},
				yAxis: {
					title: {
						text: '话 务 量 统 计 (Erlang)'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}],
					labels: {
						zIndex: 6
					}
				},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.series.name +'</b><br/>'+
							this.x +': <b>'+ this.y +'</b>';
					}
				},
				legend: {
					layout: 'vertical',
					backgroundColor: 'white',
					align: 'left',
					verticalAlign: 'top',
					y: 0,
					x: 64,
					borderWidth: 1,
					borderRadius: 0,
					title: {
						text: '点击筛选数据'
					},
					floating: true,
					draggable: true,
					zIndex: 20
				},
				series:data_sj
			});
			
			
		},  
		error:function(){     
		   alert("业务报警统计异常！");  
		}  
	 });
    
}



function getdata_bhqyysj(){
	initdate($("#selectdate").val());

	$.ajax( {  
		url:"/sa_data/bhq_view",// 跳转到 action  
		data:{  
			ydate:ydate
		},  
		type:'POST',  
		cache:false,  
		dataType:'json',  
		success:function(data) { 
			var data_dx=data.bhqfp;
			
			var data_sz=new Array();

			var data_one_tt={};
			data_one_tt["name"]="铁通线路";
			var data_one_tt_str=(data_dx[0].TT_line).split(',');
			var data_one_tt_num=new Array();
			for(var i=0;i<data_one_tt_str.length;i++){
				data_one_tt_num.push(parseInt(data_one_tt_str[i]));
			}
			data_one_tt["data"]=data_one_tt_num;
			data_sz.push(data_one_tt);


			var data_one_yd={};
			data_one_yd["name"]="移动线路";
			var data_one_yd_str=(data_dx[0].YD_line).split(',');
			var data_one_yd_num=new Array();
			for(var i=0;i<data_one_yd_str.length;i++){
				data_one_yd_num.push(parseInt(data_one_yd_str[i]));
			}
			data_one_yd["data"]=data_one_yd_num;
			data_sz.push(data_one_yd);

			
			var data_one_lt={};
			data_one_lt["name"]="联通线路";
			var data_one_lt_str=(data_dx[0].LT_line).split(',');
			var data_one_lt_num=new Array();
			for(var i=0;i<data_one_lt_str.length;i++){
				data_one_lt_num.push(parseInt(data_one_lt_str[i]));
			}
			data_one_lt["data"]=data_one_lt_num;
			data_sz.push(data_one_lt);


			var data_one_dx={};
			data_one_dx["name"]="电信线路";
			var data_one_dx_str=(data_dx[0].DX_line).split(',');
			var data_one_dx_num=new Array();
			for(var i=0;i<data_one_dx_str.length;i++){
				data_one_dx_num.push(parseInt(data_one_dx_str[i]));
			}
			data_one_dx["data"]=data_one_dx_num;
			data_sz.push(data_one_dx);

			$('#fps').highcharts({
				chart: {
					type: 'column'
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">拨号器分配概况('+ydate+')</a>'
				},
				credits: {
					text: '',
					href: '/'
				},
				xAxis: {
					categories: [
						'20系统',
						'21系统',
						'22系统'
					]
				},
				yAxis: {
					min: 0,
					title: {
						text: '分配数 (台)'
					}
				},
				tooltip: {
					headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
					pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
						'<td style="padding:0"><b>{point.y} (台)</b></td></tr>',
					footerFormat: '</table>',
					shared: true,
					useHTML: true
				},
				plotOptions: {
					column: {
						pointPadding: 0.2,
						borderWidth: 0
					}
				},
				series:data_sz
			});

			var data_cqs_dx=data.bhqrt;
			
			var data_cqs_rq=new Array();
			var data_cqs_data=new Array();

			var data_cqs_tt={};
			data_cqs_tt['name']='铁通线路';
			var data_cqs_tt_data=new Array();


			var data_cqs_yd={};
			data_cqs_yd['name']='移动线路';
			var data_cqs_yd_data=new Array();


			var data_cqs_lt={};
			data_cqs_lt['name']='联通线路';
			var data_cqs_lt_data=new Array();


			var data_cqs_dx2={};
			data_cqs_dx2['name']='电信线路';
			var data_cqs_dx_data=new Array();


			for(var i=0;i<data_cqs_dx.length;i++){
				var data_one=new Array();
				var data_one_date=data_cqs_dx[i].date;
				data_one.push(data_one_date.substr(data_one_date.length-5));
				data_cqs_rq.push(data_one);


				var data_cqs_tt_data_one=new Array();
				var data_one_TT_rt=data_cqs_dx[i].TT_rt;
				data_cqs_tt_data_one.push(data_one_TT_rt);
				data_cqs_tt_data.push(data_cqs_tt_data_one);

				
				var data_cqs_yd_data_one=new Array();
				var data_one_YD_rt=data_cqs_dx[i].YD_rt;
				data_cqs_yd_data_one.push(data_one_YD_rt);
				data_cqs_yd_data.push(data_cqs_yd_data_one);


				var data_cqs_lt_data_one=new Array();
				var data_one_LT_rt=data_cqs_dx[i].LT_rt;
				data_cqs_lt_data_one.push(data_one_LT_rt);
				data_cqs_lt_data.push(data_cqs_lt_data_one);


				var data_cqs_dx_data_one=new Array();
				var data_one_DX_rt=data_cqs_dx[i].DX_rt;
				data_cqs_dx_data_one.push(data_one_DX_rt);
				data_cqs_dx_data.push(data_cqs_dx_data_one);
			}
			data_cqs_tt['data']=data_cqs_tt_data;
			data_cqs_yd['data']=data_cqs_yd_data;
			data_cqs_lt['data']=data_cqs_lt_data;
			data_cqs_dx2['data']=data_cqs_dx_data;


			data_cqs_data.push(data_cqs_tt);
			data_cqs_data.push(data_cqs_yd);
			data_cqs_data.push(data_cqs_lt);
			data_cqs_data.push(data_cqs_dx2);
			

			$('#cqs').highcharts({
				chart: {
					type: 'areaspline'
				},
				title: {
					text: '<a style="color:#4b8cdd;font-weight:bold;">Schedule 程序重启概况</a>'
				},
				xAxis: {
					categories:data_cqs_rq
				},
				yAxis: {
					title: {
						text: '重启数 (次)'
					}
				},
				credits: {
					enabled: false
				},
				legend: {
					layout: 'vertical',
					backgroundColor: 'white',
					align: 'left',
					verticalAlign: 'top',
					y: 0,
					x: 57,
					borderWidth: 1,
					borderRadius: 0,
					title: {
						text: '点击筛选数据'
					},
					floating: true,
					draggable: true,
					zIndex: 20
				},
				plotOptions: {
					areaspline: {
						fillOpacity: 0.5
					}
				},
				series:data_cqs_data
			});



		},  
		error:function(){     
		   alert("拨号器分配概况或Schedule程序重启概况异常！");  
		}  
	 });
    
}

</script>

<style>
th {
	font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #4f6b72;
	border-right: 1px solid #C1DAD7;
	border-bottom: 1px solid #C1DAD7;
	border-top: 1px solid #C1DAD7;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px 6px 12px;
}

.table td {
	border-right: 1.5px solid #C1DAD7;
	border-bottom: 1.5px solid #C1DAD7;
	background: #fff;
	font-size: 12px;
	padding: 6px 6px 6px 12px;
	color: #4f6b72;
}

</style>

</head>
<body bgcolor="#1A1A1A">

	
	<table style="width:100%;background-color:#337FE5;" cellpadding="0"
		cellspacing="0" align="center" border="3" bordercolor="#111111">
		<tbody>

			<tr>
				<td>
					<br /><h1 style="text-align:center;">
						<span
							style="font-size:32px;font-weight:normal;line-height:1.5;font-family:'Microsoft YaHei';"><strong><span
								style="color:yellow;font-family:'Microsoft YaHei';"> 监 控
									中 心 </span><span style="color:white;font-family:'Microsoft YaHei';">运
									营 统 计 分 析</span> {% if perms.Matrix.add_report %}&nbsp;<a style="font-size:22px;color:red;" href="/preview/sainsert.html">编辑器</a>&nbsp;<a style="font-size:22px;color:yellow;" href="/preview/monthReport.html">月报表</a>{% endif %}</strong> </span>
					</h1>
					<form action="sa.php" method="post"  style="text-align:center;">
							<input style="float:right;" name="submit" type="button" value="查询签报" onclick="getdata();"/><input style="float:right;text-align:center;" id="selectdate" name="date" type="datetime" onClick="WdatePicker({skin:'blueFresh',orderdate_end:'%Y-%m-%d',dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true,maxDate:'%y-%M-%d'})" placeholder="点击选择日期"  />
					</form>

				</td>
			</tr>
			<tr>
				<td id="fxjy" style="background-color:#FFFFF8;">
					<div style="text-align:left;">
						<span style="line-height:1.5;"><span
							style="font-size:24px;color:#E53333;font-family:'Microsoft YaHei';"><strong>运营分析与建议
							<span style="color:#6633FF;font-size:14px;font-family:'Microsoft YaHei';" id="time_fxjy"></span>
							</strong> </span> </span>
					</div>
					<p>
						<span style="color:#E53333;font-size:14px;font-family:'Microsoft YaHei';">
							<strong id="data_fxjy"></strong>
						</span>
					</p>
				</td>
			</tr>

			<tr>
				<td id="hz" style="background-color:#FFFFF8;">
					<div style="text-align:left;">
						<span style="line-height:1.5;"><span
							style="font-size:24px;color:#E53333;font-family:'Microsoft YaHei';"><strong>C班报警汇总<span
									style="color:#6633FF;font-size:14px;font-family:'Microsoft YaHei';" id="time_cbhz"></span>
							</strong> </span> </span>
					</div>
					<p>
						<span
							style="color:#E53333;font-size:14px;font-family:'Microsoft YaHei';"><strong id="data_cbhz"></strong>
						</span>
					</p>
				</td>
			</tr>

			<tr>
				<td id="fullfill" style="background-color:#FFFFF8;height:333px;text-align:center">
				正在加载ing ... ...<img class="btn-large" src="/images/loading.gif" />
				</td>
			</tr>

			<tr>
				<td>
					<table id="top" style="width:100%;background-color:#FFFFF8;"
						cellpadding="3" cellspacing="0" border="1" bordercolor="#000000">
						<tbody>
							<tr>
								<td style="width:50%;padding:0;">
									<div id="zybjzb" style="min-width:100%;height:100%"></div>
								</td>
								<td style="width:50%;padding:0;">
									<div style="text-align:center;min-width:100%;height:100%;">
										<span style="color:#4b8cdd;font-weight:bold;" id="time_sdbsbjsm"></span>


										<div class="container" align=left >
											<table class="table table-hover"  style="width:98%;" border='1' cellspacing="0"
												cellpadding="0" align="center" bordercolor="#fffff8">
												<thead>
													<tr style="background-color:#fff">
														<th>规则编号</th>
														<th>报警标题</th>
														<th>报警数目</th>
													</tr>
												</thead>
												<tbody id="data_sdbsbjsm" align="center">
													
												</tbody>
											</table>
										</div>


									</div>
								</td>
							</tr>
						</tbody>
					</table>

					<table align=center style="width:100%;background-color:#FFFFF8;"
						cellpadding="3" cellspacing="0" border="1" bordercolor="#000000">
						<tr>
							<td>
								<div class="container" align=left style="width:49.8%;float:left;">
									<table style="width:98%;">
										<tr>
											<td style="text-align:center;"><span id="time_dlsjdspm"></span>
												<select onchange="getdata_dlsjdspm();" id="num_dlsjdspm">
												  <option value="">可选择</option>
												  <option value="20">top20</option>
												  <option value="30">top30</option>
												  <option value="40">top40</option>
												  <option value="50">top50</option>
												  <option value="10000">所有排名</option>
												</select>
											</td>
										</tr>
									</table>
									<table class="table table-hover" style="width:98%;"
										align="center">
										<thead>
											<tr style="background-color:#fff">
												<th>系统</th>
												<th>编号</th>
												<th>代理商</th>
												<th>进单数</th>
												<th>排名</th>
											</tr>
										</thead>
										<tbody id="data_dlsjdspm">
										</tbody>	
									</table>
								</div>
								<div id="dlsjdszb" style="width:50%;float:right"></div>
							</td>
						</tr>
					</table>



					<div id="ywbj" class="gxtjt" style="min-width:700px;height:500px">业务报警系统柱状图</div>
					<div id="hjzx" class="gxtjt" style="min-width:700px;height:500px">呼叫中心话务概况</div>
					<div id="fps" class="gxtjt" style="min-width:700px;height:500px">拨号器分配数量概况</div>
					<div id="cqs" class="gxtjt" style="min-width:700px;height:500px">拨号器重启线路概况</div>
				</td>
			</tr>
		</tbody>
	</table>

</body>
</html>
